<template>
    <div class="loginBody">
        <div class="loginDiv" style="z-index: 1; opacity: 0.8">
            <div class="login-content">
                <h1 class="login-title">用户登录</h1>
                <el-form :model="loginForm" label-width="100px" :rules="rules" ref="loginForm">
                    <el-form-item label="账号" prop="no">
                        <el-input
                                style="width: 200px"
                                type="text"
                                v-model="loginForm.no"
                                autocomplete="on"
                                size="small"
                                :list="accountList"
                                @input="selectAccount(loginForm.no)"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                                style="width: 200px"
                                type="password"
                                v-model="loginForm.password"
                                show-password
                                autocomplete="on"
                                size="small"
                                @keyup.enter.native="confirm"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="confirm" :disabled="confirm_disabled">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="block" style="z-index: -1">
            <el-image :src="src"></el-image>
        </div>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
            confirm_disabled: false,
            loginForm: {
                no: '',
                password: ''
            },
            rules: {
                no: [{required: true, message: '请输入账号', trigger: 'blur'}],
                password: [{required: true, message: '请输入密码', trigger: 'blur'}]
            },
            src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            accountList: []
        };
    },
    created() {
        this.accountList = Object.keys(localStorage)
            .filter(key => key.startsWith('account'))
            .map(key => localStorage.getItem(key));
    },
    methods: {
        selectAccount(account) {
            const password = localStorage.getItem(`password-${account}`);
            if (password) {
                this.loginForm.password = password;
            }
        },
        confirm() {
            this.confirm_disabled = true;
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    // 去后台验证用户名密码
                    this.$axios
                        .post(this.$httpUrl + '/user/login', this.loginForm)
                        .then(res => res.data)
                        .then(res => {
                            console.log(res);
                            if (res.code === 200) {
                                // 存储账号和密码到 localStorage
                                localStorage.setItem(`account-${this.loginForm.no}`, this.loginForm.no);
                                localStorage.setItem(`password-${this.loginForm.no}`, this.loginForm.password);

                                // 存储用户信息到 sessionStorage
                                sessionStorage.setItem('CurUser', JSON.stringify(res.data.user));

                                console.log(res.data.menu);
                                // 拿到menulist
                                this.$store.commit('setMenu', res.data.menu);
                                // 跳转到主页
                                this.$router.replace('/Index');
                            } else {
                                this.confirm_disabled = false;
                                alert('校验失败，用户名或密码错误！');
                            }
                            return false;
                        });
                } else {
                    this.confirm_disabled = false;
                    console.log('校验失败');
                    return false;
                }
            });
        }
    }
};

</script>

<style scoped>
.loginBody {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #b3c0d1;
}

.loginDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
    width: 450px;
    height: 330px;
    background: #fff;
    border-radius: 5%;
}

.login-title {
    margin: 20px 0;
    text-align: center;
}

.login-content {
    width: 400px;
    height: 250px;
    position: absolute;
    top: 25px;
    left: 25px;
}
</style>
